<template>
  <div class="AdminMenu">
    <div class="loadBox"></div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }"
        ><i class="lh lh-seller fw_100"></i
      ></el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
      <el-breadcrumb-item>子菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content_Box box-shadow pl_10 pr_10">
      <div class="pb_10" style="height: 30px">
        <div class="fl">
          <span class="addOK" @click="addChildMenu">新增子菜单</span>
        </div>
      </div>
      <div class="tableMaxBox">
        <template>
          <el-table :data="menuList.child" stripe>
            <el-table-column
              prop="name"
              :show-overflow-tooltip="true"
              fixed
              label="子菜单名称"
            ></el-table-column>
            <el-table-column
              prop="model"
              :show-overflow-tooltip="true"
              fixed
              label="地址Url"
            ></el-table-column>
            <el-table-column
              prop="sort"
              :show-overflow-tooltip="true"
              fixed
              label="排序"
            ></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{ row, $index }">
                <!-- <el-link type="success" class="InfoFont mr_10" @click="addFunction(row)">添加功能</el-link> -->
                <el-link
                  type="primary"
                  id="functionManage_id"
                  class="InfoFont mr_10"
                  @click="functionManage(row)"
                  >功能管理</el-link
                >
                <el-link
                  type="primary"
                  class="InfoFont mr_10"
                  @click="redactBtn(row)"
                  >编辑</el-link
                >
                <el-link
                  type="danger"
                  class="InfoFont mr_10"
                  @click="deleteAdmin(row)"
                  >删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div class="ml_50 mt_30 mb_20">
        <span class="resetBtn mr_20" @click="goBack">返 回</span>
      </div>
    </div>
    <!-- 编辑子菜单 -->
    <el-dialog
      title="编辑子菜单"
      :visible.sync="childMenuShow"
      width="560px"
      :before-close="close"
      :close-on-click-modal="false"
    >
      <div class="auditCentent">
        <div class="row_box">
          <div class="fl">
            <i class="lhadmin lhadmin-wujiaoxing"></i><span>主菜单名称：</span>
          </div>
          <div class="fl" style="width: 300px">
            <el-input v-model="addChildData.parentName" disabled></el-input>
          </div>
        </div>
        <div class="row_box">
          <div class="fl">
            <i class="lhadmin lhadmin-wujiaoxing"></i><span>子菜单名称：</span>
          </div>
          <div class="fl" style="width: 300px">
            <el-input
              v-model="addChildData.name"
              placeholder="请输入主菜单名称"
            ></el-input>
          </div>
        </div>
        <div class="row_box">
          <div class="fl">
            <i class="lhadmin lhadmin-wujiaoxing"></i><span>菜单URL：</span>
          </div>
          <div class="fl" style="width: 300px">
            <el-input
              v-model="addChildData.model"
              placeholder="请输入主菜单URL"
            ></el-input>
          </div>
        </div>
        <div class="row_box">
          <div class="fl">
            <i class="lhadmin lhadmin-wujiaoxing"></i><span>排序：</span>
          </div>
          <div class="fl" style="width: 300px">
            <el-input
              v-model="addChildData.sortMenu"
              placeholder="请输入数字"
            ></el-input>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <span class="btnOK mr_20" @click="childMenuBtn">确 定</span>
        <span class="resetBtn" @click="close">取 消</span>
      </div>
    </el-dialog>
    <!-- 子菜单添加功能 -->
    <el-dialog
      title="子菜单添加功能"
      :visible.sync="addChildFunctionShow"
      width="560px"
      :before-close="close"
      :close-on-click-modal="false"
    >
      <div class="auditCentent">
        <div class="row_box">
          <div class="fl">
            <i class="lhadmin lhadmin-wujiaoxing"></i><span>主菜单名称：</span>
          </div>
          <div class="fl" style="width: 300px">
            <el-input v-model="addChildFun.grandfather" disabled></el-input>
          </div>
        </div>
        <div class="row_box">
          <div class="fl">
            <i class="lhadmin lhadmin-wujiaoxing"></i><span>子菜单名称：</span>
          </div>
          <div class="fl" style="width: 300px">
            <el-input v-model="addChildFun.parentName" disabled></el-input>
          </div>
        </div>
        <div class="row_box">
          <div class="fl">
            <i class="lhadmin lhadmin-wujiaoxing"></i><span>功能名称：</span>
          </div>
          <div class="fl" style="width: 300px">
            <el-input
              v-model="addChildFun.name"
              placeholder="请输入功能名称"
            ></el-input>
          </div>
        </div>
        <div class="row_box">
          <div class="fl">
            <i class="lhadmin lhadmin-wujiaoxing"></i><span>功能URL：</span>
          </div>
          <div class="fl" style="width: 300px">
            <el-input
              v-model="addChildFun.model"
              placeholder="请输入主菜单URL"
            ></el-input>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <span class="btnOK mr_20" @click="addFunctionBtn">确 定</span>
        <span class="resetBtn" @click="addChildFunctionShow = false"
          >取 消</span
        >
      </div>
    </el-dialog>
    <!-- 功能管理 -->
    <el-dialog
      title="功能管理"
      :visible.sync="functionManageShow"
      :before-close="close"
      :close-on-click-modal="false"
    >
      <div class="auditCentent">
        <div class="align-left mb_10">
          <span class="addOK" @click="addFunction(functionManageArr)"
            >新增功能</span
          >
        </div>
        <template>
          <el-table :data="functionManageArr.child" stripe>
            <el-table-column
              prop="name"
              :show-overflow-tooltip="true"
              fixed
              label="功能名称"
            ></el-table-column>
            <el-table-column
              prop="model"
              :show-overflow-tooltip="true"
              fixed
              label="功能名称"
            ></el-table-column>
            <el-table-column label="操作" fixed="right" width="130px">
              <template slot-scope="{ row, $index }">
                <el-link
                  type="primary"
                  class="InfoFont mr_10"
                  @click="redactFunctionBtn(row)"
                  >编辑</el-link
                >
                <el-link
                  type="danger"
                  class="InfoFont mr_10"
                  @click="deleteAdmin(row)"
                  >删除</el-link
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <el-dialog
        width="560px"
        title="编辑功能"
        :visible.sync="innerVisible"
        append-to-body
        :close-on-click-modal="false"
      >
        <div class="auditCentent">
          <div class="row_box">
            <div class="fl">
              <i class="lhadmin lhadmin-wujiaoxing"></i
              ><span>主菜单名称：</span>
            </div>
            <div class="fl" style="width: 300px">
              <el-input v-model="addChildFun.grandfather" disabled></el-input>
            </div>
          </div>
          <div class="row_box">
            <div class="fl">
              <i class="lhadmin lhadmin-wujiaoxing"></i
              ><span>子菜单名称：</span>
            </div>
            <div class="fl" style="width: 300px">
              <el-input v-model="addChildFun.parentName" disabled></el-input>
            </div>
          </div>
          <div class="row_box">
            <div class="fl">
              <i class="lhadmin lhadmin-wujiaoxing"></i><span>功能名称：</span>
            </div>
            <div class="fl" style="width: 300px">
              <el-input
                v-model="addChildFun.name"
                placeholder="请输入功能名称"
              ></el-input>
            </div>
          </div>
          <div class="row_box">
            <div class="fl">
              <i class="lhadmin lhadmin-wujiaoxing"></i><span>功能URL：</span>
            </div>
            <div class="fl" style="width: 300px">
              <el-input
                v-model="addChildFun.model"
                placeholder="请输入主菜单URL"
              ></el-input>
            </div>
          </div>
          <div slot="footer" class="dialog-footer mt_20">
            <span class="btnOK mr_20" @click="redactFunctionSubmit">确 定</span>
            <span class="resetBtn" @click="innerVisible = false">取 消</span>
          </div>
        </div>
      </el-dialog>
      <div slot="footer" class="">
        <span class="resetBtn" @click="close">关 闭</span>
      </div>
    </el-dialog>
    <!-- 添加子菜单 -->
    <el-dialog
      title="添加子菜单"
      :visible.sync="addChildMenuShow"
      width="560px"
      :close-on-click-modal="false"
    >
      <div class="auditCentent">
        <div class="row_box">
          <div class="fl">
            <i class="lhadmin lhadmin-wujiaoxing"></i><span>主菜单名称：</span>
          </div>
          <div class="fl" style="width: 300px">
            <el-input v-model="addChildData.parentName" disabled></el-input>
          </div>
        </div>
        <div class="row_box">
          <div class="fl">
            <i class="lhadmin lhadmin-wujiaoxing"></i><span>子菜单名称：</span>
          </div>
          <div class="fl" style="width: 300px">
            <el-input
              v-model="addChildData.name"
              placeholder="请输入主菜单名称"
            ></el-input>
          </div>
        </div>
        <div class="row_box">
          <div class="fl">
            <i class="lhadmin lhadmin-wujiaoxing"></i><span>主菜单URL：</span>
          </div>
          <div class="fl" style="width: 300px">
            <el-input
              v-model="addChildData.model"
              placeholder="请输入主菜单URL"
            ></el-input>
          </div>
        </div>
        <div class="row_box">
          <div class="fl">
            <i class="lhadmin lhadmin-wujiaoxing"></i><span>排序：</span>
          </div>
          <div class="fl" style="width: 300px">
            <el-input
              v-model="addChildData.sortMenu"
              placeholder="请输入数字"
            ></el-input>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <span class="btnOK mr_20" @click="addChildMenuBtn">确 定</span>
        <span class="resetBtn" @click="close">取 消</span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
var common = require('../../static/tool.js');
import {
  mainfun
} from '../assets/js/main.js';
import {
  publicData
} from '../assets/js/data.js';
export default {
  name: 'AdminChildMenu',
  data() {
    return {
      windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
      screenHeight: document.documentElement.clientHeight,
      manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')),
      url: common.url,
      childMenuShow: false, //添加子菜单弹框
      addChildFunctionShow: false, //子菜单添加功能
      functionManageShow: false, //功能管理弹框
      innerVisible: false, //内层dialog
      addChildMenuShow: false, //添加子菜单
      functionManageArr: [], //功能管理
      menuList: [], //获取权限管理
      menu_id: '', //携带过来的主菜单id
      addChildData: {
        parentName: '',
        name: '',
        parent_id: '',
        level: '2',
        model: '',
        desc: '',
        sortMenu: '',
      }, //添加子菜单的数据
      addChildFun: {
        grandfather: '',
        parentName: '',
        name: '',
        id: '',
        level: '3',
        model: '',
        desc: '',

      }, //添加子菜单下功能
      channel: '' //渠道
    }
  },
  mounted() {
    this.startResult();
  },
  methods: {
    startResult() {
      if (!sessionStorage.getItem('manageInfo')) { // 判断是否登录
        window.location = 'login.html';
        return;
      }
      this.menu_id = this.$route.query.id;
      this.channel = this.$route.query.channel

      this.getListPermissions();
    },
    getListPermissions() { //获取权限列表
      let fn = new FormData();
      fn.append('role_id', ''); //页码
      //fn.append('level','2'); //子菜单
      fn.append('channel', this.channel) //区分渠道
      this.$http.post(this.url + '/menu/menulist', fn).then((res) => {
        if (res.data.msg == '查询成功' || res.data.code == '200') {
          let data = res.data.data;
          for (let i = 0;i < data.length;i++) {
            if (data[i].id == this.menu_id) {
              this.menuList = data[i];
              break;
            }
          }
        } else if (res.data.code == '8886') { //code   8886  登录过期
          sessionStorage.clear();
          this.$alert('登录已过期，请重新登录 !', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              window.location = 'login.html';
            }
          });
          return;
        } else {
          this.$message.error(res.data.msg);
          return;
        }
      }, (res) => {
        this.$message.error('网络错误！');
        return;
      })
    },
    // 添加子菜单
    addChildMenu() {
      this.addChildMenuShow = true;
      this.addChildData.parentName = this.menuList.name;
      this.addChildData.parent_id = this.menu_id;
    },
    // 	提交添加子菜单
    addChildMenuBtn() {
      if (this.addChildData.name == '' || this.addChildData.model == '' || this.addChildData.sortMenu == '') {
        this.$message.error('请输入必填项！');
        return;
      }
      if (isNaN(this.addChildData.sortMenu)) {
        this.$message.error('排序请输入数字！');
        return;
      }
      this.addChildMenuShow = false; //关闭弹框
      let fn = new FormData();
      fn.append('name', this.addChildData.name); //权限名称
      fn.append('parent_id', this.addChildData.parent_id); //父级别ID
      fn.append('level', this.addChildData.level); //权限级别(共三级1、2、3)
      fn.append('model', this.addChildData.model); //权限作用域  地址
      fn.append('desc', this.addChildData.desc); //备注
      fn.append('sort', this.addChildData.sortMenu); //排序
      fn.append('channel', this.channel) //区分渠道
      this.$http.post(this.url + '/menu/addmenu', fn).then((res) => {
        if (res.data.msg == '查询成功' || res.data.code == '200') {
          this.$message.success(res.data.msg);
          this.getListPermissions();
        } else if (res.data.code == '8886') { //code   8886  登录过期
          sessionStorage.clear();
          this.$alert('登录已过期，请重新登录 !', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              window.location = 'login.html';
            }
          });
          return;
        } else {
          this.$message.error(res.data.msg);
          return;
        }
      }, (res) => {
        this.$message.error('网络错误！');
        return;
      });
      this.addChildData = { parentName: '', name: '', parent_id: '', level: '2', model: '', desc: '', }; //添加子菜单的数据
    },
    //编辑子菜单
    redactBtn(row) {
      this.addChildData.parentName = this.menuList.name;
      this.addChildData.name = row.name;
      this.addChildData.id = row.id;
      this.addChildData.model = row.model;
      this.addChildData.sortMenu = row.sort;
      this.childMenuShow = true;
    },
    // 编辑菜单确定
    childMenuBtn() {
      if (this.addChildData.name == '' || this.addChildData.model == '' || this.addChildData.sortMenu == '') {
        this.$message.error('请输入必填项！');
        return;
      }
      if (isNaN(this.addChildData.sortMenu)) {
        this.$message.error('排序请输入数字！');
        return;
      }
      let fn = new FormData();
      fn.append('id', this.addChildData.id); //id
      fn.append('name', this.addChildData.name); //权限名称
      fn.append('model', this.addChildData.model); //权限作用域  地址
      fn.append('desc', this.addChildData.desc); //备注
      fn.append('sort', this.addChildData.sortMenu); //排序
      fn.append('channel', this.channel) //区分渠道
      this.$http.post(this.url + '/menu/menuedit', fn).then((res) => {
        if (res.data.msg == '查询成功' || res.data.code == '200') {
          this.getListPermissions();
        } else if (res.data.code == '8886') { //code   8886  登录过期
          sessionStorage.clear();
          this.$alert('登录已过期，请重新登录 !', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              window.location = 'login.html';
            }
          });
          return;
        } else {
          this.$message.error(res.data.msg);
          return;
        }
      }, (res) => {
        this.$message.error('网络错误！');
        return;
      });
      this.close();
    },
    addFunction(row) { //添加功能
      this.addChildFun.grandfather = this.menuList.name,
        this.addChildFun.parentName = row.name,
        this.addChildFun.id = row.id,
        this.addChildFunctionShow = true;
    },
    // 为子菜单添加功能
    addFunctionBtn() {
      if (this.addChildFun.name == '' || this.addChildFun.model == '') {
        this.$message.error('请输入必填项！');
        return;
      }
      this.addChildFunctionShow = false;
      let fn = new FormData();
      fn.append('name', this.addChildFun.name); //权限名称
      fn.append('parent_id', this.addChildFun.id); //父级别ID
      fn.append('level', this.addChildFun.level); //权限级别(共三级1、2、3)
      fn.append('model', this.addChildFun.model); //权限作用域  地址
      fn.append('desc', this.addChildFun.desc); //备注
      fn.append('channel', this.channel) //区分渠道
      this.$http.post(this.url + '/menu/addmenu', fn).then((res) => {
        if (res.data.msg == '查询成功' || res.data.code == '200') {
          this.$message.success(res.data.msg);
          let fn = new FormData();
          fn.append('role_id', ''); //页码
          fn.append('channel', this.channel) //区分渠道
          this.$http.post(this.url + '/menu/menulist', fn).then((res) => {
            if (res.data.msg == '查询成功' || res.data.code == '200') {
              let data = res.data.data;
              for (let i = 0;i < data.length;i++) {
                if (data[i].id == this.menu_id) {
                  this.menuList = data[i];
                  break;
                }
              }
              for (let n = 0;n < this.menuList.child.length;n++) {
                if (this.functionManageArr.id == this.menuList.child[n].id) {
                  this.functionManageArr = this.menuList.child[n];
                  break;
                }
              }
            } else if (res.data.code == '8886') { //code   8886  登录过期
              sessionStorage.clear();
              this.$alert('登录已过期，请重新登录 !', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                  window.location = 'login.html';
                }
              });
              return;
            } else {
              this.$message.error(res.data.msg);
              return;
            }
          }, (res) => {
            this.$message.error('网络错误！');
            return;
          })

        } else if (res.data.code == '8886') { //code   8886  登录过期
          sessionStorage.clear();
          this.$alert('登录已过期，请重新登录 !', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              window.location = 'login.html';
            }
          });
          return;
        } else {
          this.$message.error(res.data.msg);
          return;
        }
      }, (res) => {
        this.$message.error('网络错误！');
        return;
      });
      this.addChildFun = { grandfather: '', parentName: '', name: '', id: '', level: '3', model: '', desc: '', }; //添加子菜单下功能
    },
    functionManage(row) { //功能管理
      this.functionManageArr = [];
      this.functionManageArr = row;
      this.functionManageShow = true;
    },
    redactFunctionBtn(row) { //编辑功能
      this.addChildFun.grandfather = this.menuList.name,
        this.addChildFun.parentName = this.functionManageArr.name,
        this.addChildFun.name = row.name,
        this.addChildFun.model = row.model,
        this.addChildFun.id = row.id,
        this.innerVisible = true;
    },

    redactFunctionSubmit() { //编辑功能保存
      if (this.addChildFun.name == '' || this.addChildFun.model == '') {
        this.$message.error('请输入必填项！');
        return;
      }
      this.innerVisible = false;
      let fn = new FormData();
      fn.append('id', this.addChildFun.id); //id
      fn.append('name', this.addChildFun.name); //权限名称
      fn.append('model', this.addChildFun.model); //权限作用域  地址
      fn.append('desc', this.addChildFun.desc); //备注
      fn.append('channel', this.channel) //区分渠道
      this.$http.post(this.url + '/menu/menuedit', fn).then((res) => {
        if (res.data.msg == '查询成功' || res.data.code == '200') {
          this.$message.success(res.data.msg);
          let fn = new FormData();
          fn.append('role_id', ''); //页码
          fn.append('channel', this.channel) //区分渠道
          this.$http.post(this.url + '/menu/menulist', fn).then((res) => {
            if (res.data.msg == '查询成功' || res.data.code == '200') {
              let data = res.data.data;
              for (let i = 0;i < data.length;i++) {
                if (data[i].id == this.menu_id) {
                  this.menuList = data[i];
                  break;
                }
              }
              for (let n = 0;n < this.menuList.child.length;n++) {
                if (this.functionManageArr.id == this.menuList.child[n].id) {
                  this.functionManageArr = this.menuList.child[n];
                  break;
                }
              }
            } else if (res.data.code == '8886') { //code   8886  登录过期
              sessionStorage.clear();
              this.$alert('登录已过期，请重新登录 !', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                  window.location = 'login.html';
                }
              });
              return;
            } else {
              this.$message.error(res.data.msg);
              return;
            }
          }, (res) => {
            this.$message.error('网络错误！');
            return;
          })

        } else if (res.data.code == '8886') { //code   8886  登录过期
          sessionStorage.clear();
          this.$alert('登录已过期，请重新登录 !', '提示', {
            confirmButtonText: '确定',
            callback: action => {
              window.location = 'login.html';
            }
          });
          return;
        } else {
          this.$message.error(res.data.msg);
          return;
        }
      }, (res) => {
        this.$message.error('网络错误！');
        return;
      });
      // this.close();

    },

    deleteAdmin(row) { //删除
      this.$confirm('此操作将删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let fn = new FormData();
        fn.append('id', row.id);
        fn.append('channel', this.channel) //区分渠道
        this.$http.post(this.url + '/menu/delemenu', fn).then((res) => {
          if (res.data.msg == '查询成功' || res.data.code == '200') {
            this.$message.success(res.data.msg);
            let fn = new FormData();
            fn.append('role_id', ''); //页码
            fn.append('channel', this.channel) //区分渠道
            this.$http.post(this.url + '/menu/menulist', fn).then((res) => {
              if (res.data.msg == '查询成功' || res.data.code == '200') {
                let data = res.data.data;
                for (let i = 0;i < data.length;i++) {
                  if (data[i].id == this.menu_id) {
                    this.menuList = data[i];
                    break;
                  }
                }
                for (let n = 0;n < this.menuList.child.length;n++) {
                  if (this.functionManageArr.id == this.menuList.child[n].id) {
                    this.functionManageArr = this.menuList.child[n];
                    break;
                  }
                }
              } else if (res.data.code == '8886') { //code   8886  登录过期
                sessionStorage.clear();
                this.$alert('登录已过期，请重新登录 !', '提示', {
                  confirmButtonText: '确定',
                  callback: action => {
                    window.location = 'login.html';
                  }
                });
                return;
              } else {
                this.$message.error(res.data.msg);
                return;
              }
            }, (res) => {
              this.$message.error('网络错误！');
              return;
            })

          } else if (res.data.code == '8886') { //code   8886  登录过期
            sessionStorage.clear();
            this.$alert('登录已过期，请重新登录 !', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                window.location = 'login.html';
              }
            });
            return;
          } else {
            this.$message.error(res.data.msg);
            return;
          }
        }, (res) => {
          this.$message.error('网络错误！');
          return;
        })
      }).catch(() => { });
    },
    close() { //关闭弹框
      this.childMenuShow = false, //添加子菜单弹框
        this.addChildFunctionShow = false, //子菜单添加   功能
        this.functionManageShow = false, //功能管理弹框
        this.innerVisible = false, //内层dialog
        this.addChildMenuShow = false, //添加子菜单
        this.functionManageArr = [], //功能管理
        this.addChildData = { parentName: '', name: '', parent_id: '', level: '2', model: '', desc: '', sortMenu: '', }; //添加子菜单的数据
      this.addChildFun = { grandfather: '', parentName: '', name: '', id: '', level: '3', model: '', desc: '', }; //添加子菜单下功能
    },
    goBack() {
      this.$router.go('-1');
    }
  },
  filters: {

  }
}
</script>

<style scoped>
.AdminChildMenu {
  margin: 15px 15px 0 15px;
}

.row_box {
  height: 50px;
  line-height: 48px;
}

.row_box > div:nth-child(1) {
  width: 125px;
  text-align: right;
}

.row_box > div:nth-child(2) {
  width: 300px;
}

.lhadmin-wujiaoxing {
  font-size: 12px;
  margin-right: 5px;
  color: var(--red3);
}

.dialog-footer {
  padding-left: 125px;
  text-align: left;
}

@media (max-width: 767.78px) {
}

/* 上传 */
</style>



// WEBPACK FOOTER //
// src/components/AdminChildMenu.vue